  <template>
    <div style="width:1500px;height:1000px">
      <div id="byteVCellId" style="height:1000px"></div>
    </div>
  </template>

  <script>
    import 'echarts/map/js/china.js'
    import 'echarts/lib/component/title'
    import 'echarts/lib/component/legend'
    import 'echarts/lib/chart/heatmap'
    import 'echarts/lib/component/toolbox'
    import 'echarts/lib/component/tooltip'

    export default {
      name: "Test",
      data() {
        return {
          // 热力图
          locationCarsList: []
        }
      },
      mounted() {
        this.getCarLocationData()
      },
      methods: {
        DrawChartsHeartMap() {
          // 基于准备好的dom，初始化echarts实例
          let myChartapp = this.$echarts.init(document.getElementById("byteVCellId"));

          let option = {
            title: {
              text: '布局城市展示',
              x: 'left',
              textStyle: {
                fontSize: 33,
                color: '#fff',
                fontWeight: 'bold',
                fontFamily: 'testFamily'
              }
            },
            tooltip: {
              trigger: 'item'
            },

            visualMap: {
              show: false,
              min: 0,
              max: 3,
              seriesIndex: 0,
              calculable: true,
              inRange: {
                color: ['blue', 'green', 'yellow', 'red']
                // color: ['green', 'yellow', 'red']
              }
            },
            geo: {
              map: 'china',
              zoom: 1,
              label: {
                emphasis: {
                  show: true
                }
              },
              roam: true,
              itemStyle: {
                normal: {
                  areaColor: '#0d2a5f',
                  borderColor: '#ffffff'
                },
                emphasis: {
                  areaColor: '#555'
                }
              }
            },
            series: [{
              name: '中国',
              type: 'heatmap',
              coordinateSystem: 'geo',
              data: this.locationCarsList,
              pointSize: 8,
              blurSize: 5
            }]
          }
          // 使用刚指定的配置项和数据显示图表。
          myChartapp.setOption(option);

        },
        getCarLocationData() {
          var api = "/carLocationData"
          this.$axios.get(api).then((response) => {
            for (var i = 0; i < response.data.length; i++) {
              this.locationCarsList[i] = response.data[i]
            }
            this.DrawChartsHeartMap()
          }).catch((error) => {
            console.log(error)
          })
        }
      }
    }
  </script>

  <style scoped>

  </style>
